<template>
  <div>
    <div class="provider-list">
      <div class="content">
        <div class="project-info">
          <div class="form-box">
            <el-form
              ref="formRef"
              style="max-width: 1200px"
              :model="form"
              :rules="rules"
              label-position="top"
            >
              <el-form-item
                label="专家照片(建议尺寸:322*478px)"
                prop="zhuanjiazhaopian"
              >
                <bjz-oss
                  :previewList="form.zhuanjiazhaopian"
                  :accept="['.jpg', '.png', '.jpeg']"
                  @success="successIntroImg"
                  @remove="removeIntroImg"
                />
              </el-form-item>
              <el-form-item label="专家名称" prop="zhuanjiamingcheng">
                <el-col :span="10">
                  <el-input size="large" v-model="form.zhuanjiamingcheng" />
                </el-col>
              </el-form-item>
              <el-form-item label="联系方式/账号" prop="lianxifangshi">
                <el-col :span="10">
                  <el-input
                    size="large"
                    v-model="form.lianxifangshi"
                    placeholder="请输入手机号"
                  />
                </el-col>
              </el-form-item>
              <el-form-item label="密码" prop="mima">
                <el-col :span="10">
                  <el-input
                    size="large"
                    v-model="form.mima"
                    placeholder="默认手机号后六位"
                  />
                </el-col>
              </el-form-item>
              <el-form-item label="邮箱" prop="youxiang">
                <el-col :span="10">
                  <el-input size="large" v-model="form.youxiang" />
                </el-col>
              </el-form-item>
              <el-form-item label="业务类型：" prop="yewuleixing1">
                <el-select
                  v-model="form.yewuleixing1"
                  size="large"
                  multiple
                  placeholder="一级业务"
                  :loading="loading1"
                  style="width: 240px"
                  @remove-tag="removeTag1"
                >
                  <el-option
                    v-for="item in type1"
                    :key="item.dicValue"
                    :label="item.dicLabel"
                    :value="item.dicValue"
                  />
                </el-select>
                <el-select
                  v-model="form.yewuleixing2"
                  size="large"
                  multiple
                  placeholder="二级业务"
                  :loading="loading2"
                  style="width: 240px; margin-left: 10px"
                  @visible-change="GetType2"
                  @remove-tag="removeTag2"
                >
                  <el-option
                    v-for="item in type2"
                    :key="item.dicValue"
                    :label="item.dicLabel"
                    :value="item.dicValue"
                  />
                </el-select>
                <el-select
                  v-model="form.yewuleixing3"
                  size="large"
                  multiple
                  placeholder="三级业务"
                  :loading="loading3"
                  style="width: 240px; margin-left: 10px"
                  @visible-change="GetType3"
                >
                  <el-option
                    v-for="item in type3"
                    :key="item.dicValue"
                    :label="item.dicLabel"
                    :value="item.dicValue"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="所属企业" prop="qiye">
                <el-select
                  v-model="form.qiye"
                  size="large"
                  placeholder="选择企业"
                  style="width: 460px"
                >
                  <el-option
                    v-for="item in company"
                    :key="item.gysNo"
                    :label="item.gongsimingcheng"
                    :value="item.gysNo"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="职称" prop="zhicheng">
                <el-select
                  v-model="form.zhicheng"
                  size="large"
                  placeholder="选择职称"
                  style="width: 460px"
                >
                  <el-option
                    v-for="item in profession"
                    :key="item.dicValue"
                    :label="item.dicLabel"
                    :value="item.dicValue"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="专家标签" prop="biaoqian">
                <el-select
                  v-model="form.biaoqian"
                  size="large"
                  placeholder="选择标签"
                  style="width: 460px"
                >
                  <el-option
                    v-for="item in expertLabel"
                    :key="item.dicValue"
                    :label="item.dicLabel"
                    :value="item.dicValue"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="专业证书">
                <bjz-oss
                  :previewList="form.zhuanyezhengshu"
                  :accept="['.jpg', '.png', '.jpeg']"
                  :allowMultiple="true"
                  @success="successCertificationImg"
                  @remove="removeCertificationImg"
                />
              </el-form-item>
              <el-form-item label="擅长及简介" prop="shanchang">
                <el-col :span="10">
                  <el-input
                    size="large"
                    type="textarea"
                    maxlength="500"
                    :rows="10"
                    v-model="form.shanchang"
                  />
                </el-col>
              </el-form-item>
              <el-form-item label="审核状态" v-if="check === '1'">
                <el-radio-group v-model="form.shenhe">
                  <el-radio :label="0">待审核</el-radio>
                  <el-radio :label="1">审核通过</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item style="margin-top: 50px">
                <el-button
                  style="margin-left: 100px"
                  type="primary"
                  @click="submitForm(formRef)"
                  >提交信息</el-button
                >
                <el-button style="margin-left: 50px" @click="$router.go(-1)"
                  >取消</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent, toRefs, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import upimg from "@/assets/icon-upload.png";
import { GetDictionary, GetDictionaryTree } from "@/api/system";
import { GetProviderOptions } from "@/api/provider";
import { AddExpert, GetExpert, EditExpert } from "@/api/expert";
import { baseMsg } from "@/utils/utils";
export default defineComponent({
  setup() {
    // (多张图片上传和图片回显未完成)
    const route = useRoute();
    const router = useRouter();
    const formRef = ref(null);
    const validateImg = (rule, value, callback) => {
      if (state.form.zhuanjiazhaopian && state.form.zhuanjiazhaopian.length) {
        callback();
      } else {
        callback(new Error("请上传专家照片"));
      }
    };
    const validateImg1 = (rule, value, callback) => {
      if (state.form.zhuanyezhengshu && state.form.zhuanyezhengshu.length) {
        callback();
      } else {
        callback(new Error("请上传专业证书"));
      }
    };
    const state = reactive({
      rules: {
        zhuanjiazhaopian: [
          {
            required: true,
            trigger: "blur",
            validator: validateImg,
          },
        ],
        zhuanjiamingcheng: [
          {
            required: true,
            trigger: "blur",
            message: "请输入专家名称",
          },
        ],
        mima: [
          {
            min: 6,
            max: 6,
            required: true,
            message: "请输入密码（6位）",
            trigger: "blur",
          },
        ],
        lianxifangshi: [
          {
            pattern: /^1[0-9]{10}$/,
            required: true,
            message: "请输入正确的手机号",
            trigger: "blur",
          },
        ],
        youxiang: [
          {
            pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
            message: "请输入正确的邮箱",
            trigger: "blur",
          },
        ],
        yewuleixing1: [
          {
            required: true,
            trigger: "change",
            message: "请选择业务类型",
          },
        ],
        qiye: [
          {
            required: true,
            trigger: "change",
            message: "请选择所属企业",
          },
        ],
        zhicheng: [
          {
            required: true,
            trigger: "change",
            message: "请选择职称",
          },
        ],
        biaoqian: [
          {
            required: true,
            trigger: "change",
            message: "请选择专家标签",
          },
        ],
        zhuanyezhengshu: [
          {
            required: true,
            trigger: "blur",
            validator: validateImg1,
          },
        ],
        shanchang: [
          {
            required: true,
            trigger: "blur",
            message: "请输入擅长及简介",
          },
        ],
      },
      upimg,
      form: {
        zhuanjiazhaopian: [],
        zhuanjiamingcheng: "",
        lianxifangshi: "",
        mima: "",
        youxiang: "",
        yewuleixing1: [],
        yewuleixing2: [],
        yewuleixing3: [],
        qiye: "",
        zhicheng: "",
        biaoqian: "",
        zhuanyezhengshu: [],
        shanchang: "",
        shenhe: 0,
      },
      loading1: true,
      loading2: true,
      loading3: true,
      type1: [],
      type2: [],
      type3: [],
      // 所属企业下拉
      company: [],
      // 职称下拉
      profession: [],
      // 专家标签下拉
      expertLabel: [],
      check: localStorage.getItem("check"),
    });
    // 一级分类查询
    const GetType1 = async () => {
      state.loading1 = true;
      const res = await GetDictionaryTree({
        dicModel: "gongyingshangpinzhuanjialeixing",
      });
      if (res.code == 4201) {
        state.type1 = res.data;
        state.loading1 = false;
      } else {
        state.loading1 = false;
      }
    };
    // 查询二级分类
    const GetType2 = (val) => {
      state.loading2 = true;
      state.type2 = [];
      if (state.form.yewuleixing1.length > 0) {
        state.form.yewuleixing1.forEach((item) => {
          let obj = {};
          GetDictionary({ dicId: item }).then((res) => {
            obj = res;
            if (obj.code == 4201 && obj.data.length > 0) {
              obj.data.forEach((item) => {
                state.type2.push(item);
              });
            }
          });
        });
        state.loading2 = false;
      } else {
        state.loading2 = false;
      }
    };
    // 查询三级分类
    const GetType3 = (val) => {
      state.loading3 = true;
      state.type3 = [];
      if (state.form.yewuleixing2.length > 0) {
        state.form.yewuleixing2.forEach((item) => {
          let obj = {};
          GetDictionary({ dicId: item }).then((res) => {
            obj = res;
            if (obj.code == 4201 && obj.data.length > 0) {
              obj.data.forEach((item) => {
                state.type3.push(item);
              });
            }
          });
        });
        state.loading3 = false;
      } else {
        state.loading3 = false;
      }
    };
    // 企业下拉查询
    const GetProviders = () => {
      GetProviderOptions().then((res) => {
        if (res.code == 4201) {
          state.company = res.data;
        }
      });
    };
    // 职称下拉查询
    const GetProfession = () => {
      GetDictionaryTree({ dicModel: "zhuanjiazhicheng" }).then((res) => {
        if (res.code == 4201) {
          state.profession = res.data;
        }
      });
    };
    // 专家标签下拉查询
    const GetExpertLabel = () => {
      GetDictionaryTree({ dicModel: "zhuanjiabiaoqian" }).then((res) => {
        if (res.code == 4201) {
          state.expertLabel = res.data;
        }
      });
    };
    // 专家id查询
    const QueryExpert = () => {
      if (route.query.type == "edit") {
        GetExpert({ id: route.query.id }).then((res) => {
          if (res.code == 4201) {
            state.form = res.data;
            GetType2();
            GetType3();
          }
        });
      }
    };
    // 移除已选择的标签
    const removeTag1 = () => {
      state.form.yewuleixing2 = [];
      state.type2 = [];
      state.form.yewuleixing3 = [];
      state.type3 = [];
    };
    const removeTag2 = () => {
      state.form.yewuleixing3 = [];
      state.type3 = [];
    };
    // 专家图片上传
    const successIntroImg = (res) => {
      state.form.zhuanjiazhaopian.push(res);
    };
    // 专家证书上传
    const successCertificationImg = (res) => {
      state.form.zhuanyezhengshu.push(res);
    };
    // 上传文件删除
    const removeIntroImg = (index) => {
      state.form.zhuanjiazhaopian.splice(index, 1);
    };
    const removeCertificationImg = (index) => {
      state.form.zhuanyezhengshu.splice(index, 1);
    };
    // 提交表单
    const submitForm = async (formEl) => {
      if (!formEl) return;
      await formEl.validate((valid, fields) => {
        if (valid) {
          if (route.query.type == "add") {
            AddExpert(state.form).then((res) => {
              if (res.code == 4202) {
                baseMsg("新增专家成功");
                router.go(-1);
              }
            });
          }
          if (route.query.type == "edit") {
            EditExpert(state.form).then((res) => {
              if (res.code == 4202) {
                baseMsg("编辑专家成功");
                router.go(-1);
              }
            });
          }
        }
      });
    };
    GetType1();
    GetProviders();
    GetProfession();
    GetExpertLabel();
    QueryExpert();
    return {
      ...toRefs(state),
      submitForm,
      successIntroImg,
      successCertificationImg,
      formRef,
      GetType1,
      GetType2,
      GetType3,
      removeTag1,
      removeTag2,
      removeIntroImg,
      removeCertificationImg,
      GetProviders,
      GetProfession,
      GetExpertLabel,
      QueryExpert,
    };
  },
});
</script>
<style lang="scss" scoped>
.content {
  border: none !important;
}
.project-info {
  padding: 30px 100px;
  font-size: 20px;
  color: black;
  .form-box {
    padding-left: 200px;
    form {
      width: 100%;
      margin-left: 200px;
    }
  }
}
</style>
